<script lang="ts" setup>
const userStore = useMyUserStore();
const examStore = useMyExamStore();
definePageMeta({
  middleware: ["auth"],
});
const examItems = computed<ExamHeadType[]>(() => examStore.data);
const page = ref(1);
const totalPages = computed(() => examItems.value.length);
// const examItem = ref<ExamHeadType | undefined>();

function joinExam(index: number) {
  examStore.setTested(index);
}

onBeforeMount(async () => {
  if (examStore.noExam)
    await examStore.doFetch();
});
</script>

<template>
  <ClientOnly>
    <div class="pl-4 py-2 text-xl font-bold">
      <p>你好 "{{ userStore.data.nickname }}"</p>
      <!-- <p>你可以参加的测试如下</p> -->
    </div>
    <UDivider class="mb-2" />
    <template v-if="totalPages > 0">
      <div v-for="(examItem, index) in examItems" :key="examItem.eid">
        <ExamExerciseLabel
          :key="index"
          :exam-item="examItem"
          :index="index + 1"
          @join-exam="
            () => {
              joinExam(index);
            }
          "
        />
      </div>
      <UDivider class="my-4">
        <UButton @click="examStore.doFetch">
          refresh
        </UButton>
      </UDivider>
      <div class="flex justify-center">
        <UPagination
          v-model="page"
          :page-count="3"
          :total="totalPages"
          :prev-button="{
            icon: 'i-heroicons-arrow-small-left-20-solid',
            color: 'gray',
          }"
          :next-button="{
            icon: 'i-heroicons-arrow-small-right-20-solid',
            trailing: true,
            color: 'gray',
          }"
          show-last
          show-first
        />
      </div>
    </template>
    <template v-else>
      <p>暂无数据</p>
    </template>
    <template #fallback>
      <FallBack />
    </template>
  </ClientOnly>
</template>

<style></style>
